<template>
	<view>
		<view class="top">
		</view>
		<view class="bottom" v-if="!isAdd">
			<view class="bottom-card1">
				<view class="car" v-if="!infoList">
					<image src="../../../static/images/汽车小车.png"></image>
					<view class="font">暂无车辆信息</view>
				</view>
				<view class="tt" v-else v-for="(info, a) in infoList" :index="a" :key="a">
					<view style="display: flex; justify-content: center; align-items: center;">
						<template v-for="(ty, t) in typeList">
							<u--image 
							style="margin-top: 20px; object-fit: contain;" 
							:index="t" 
							:key="t" 
							v-if="info.type==ty.id" 
							width="120px" 
							height="60px" 
							:src="ty.img"
							shape="fit"
							 />
						</template>
					</view>
					<view class="tou">
						<template v-for="(bd, d) in brandList">
							<view class="touxiang" :index="d" :key="d" v-if="info.brand==bd.id"><u--image width="60px" height="60px" :src="bd.logo" shape="circle" style="object-fit: contain;" /></view>
						</template>		
						<view class="xinxi">
							<view class="font1">
								车型：
								<template v-for="(brand, b) in brandList">
									<text :index="b"  :key="b" v-if="info.brand==brand.id">{{brand.name}}</text>
								</template>
								-
								<template v-for="(type, c) in typeList">
									<text :index="c" :key="c" v-if="info.type==type.id">{{type.name}}</text>
								</template>		
							</view>
							<view class="font2">车牌：{{info.carNum}}</view>
						</view>
					</view>
					<view class="shezhi">
						<view style="color: #2979ff;">
							{{info.default==1?'默认车辆':''}}
						</view>
						<view @tap="delCar(info)" style="color: #FF0000;">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom" v-else>
			<view class="bottom-card1">
				<view class="carImg">
					<image src="../../../static/images/汽车小车.png"  v-if="!typeImg" />
					<image v-else :src="typeImg"/>
				</view>
				<view class="biaodan">
					<form action="">
						<view class="ff">
							<label class="lab">用户名</label>
							<input disabled="ture" class="inp" v-model="nickname" placeholder="请输入" type="text" />
						</view>
						<view class="ff">
							<label class="lab">车辆品牌</label>
							<picker
							class="inp"
							 mode="selector" 
							 :range="brandList"
							  range-key="name"
							 @change="selectBrand"
							 v-model="brandName"
							>
								<view class="picker-display">
								  {{ brandName }}
								  <text class="iconfont icon-arrowdown"></text>
								</view>
							</picker>
						</view>
						<view class="ff">
							<label class="lab">车辆型号</label>
							<picker
							class="inp"
							 mode="selector" 
							 :range="tyList" 
							 range-key="name"
							 @change="selectType"
							 v-model="typeName"
								>
								<view class="picker-display">
								  {{ typeName }}
								  <text class="iconfont icon-arrowdown"></text>
								</view>
							</picker>
						</view>
						<view class="ff">
							<label class="lab">车牌号码</label>
							<input class="inp" v-model="form.carNum" placeholder="请输入" type="text" />
						</view>	
					</form>
				</view>
			</view>
		</view>
		<view class="tianjia">
			<u-button shape="circle" type="primary" icon="plus" @tap="addCar" text="添加车辆"></u-button>
		</view>
	</view>
</template>

<script>
import request from '../../../uitls/request';

	export default {
		data() {
			return {
				cars:false,
				infoList:[],
				typeList:[],
				brandList:[],
				tyList:[],
				isAdd:false,
				nickname:'',
				form:{
					uid:'',
					brand:'',
					type:'',
					carNum:''					
				},
				brandName:'',
				typeName:'',
				typeImg:''
			}
		},
		methods: {
			   addCar() {
				   if(!this.isAdd){
					   this.isAdd = true
				   }else {
					   // console.log(this.form)
					request({
						url: '/bigbase/carInfo',
						method: 'POST',
						data:this.form,
						success: (res) => {
							if(res.data.code==200){
								uni.showToast({
								  title: '添加成功', 
								  duration: 2000,
								  complete: () => { // Toast 显示完成后执行
								      this.getCarInfo()
									  this.isAdd = false
								    }
								});
							}
						}
					})
				   }
			    },
				delCar(info){
					// console.log(info)
					uni.showModal({
					    title: '提示',
					    content: '确定要删除这条数据吗？',
					    confirmText: '确认删除', // 自定义确认按钮文字
					    cancelText: '取消', // 自定义取消按钮文字
					    confirmColor: '#FF0000', // 确认按钮颜色
					    cancelColor: '#666666', // 取消按钮颜色
					    success: function (r) {
							if (r.confirm) {
								request({
									url: '/bigbase/carInfo/'+info.id,
									method: 'DELETE',
									success: (res) => {
										if(res.data.code==200){
											uni.showToast({
											  title: '删除成功', 
											  duration: 2000  ,// 设置一个较长的时间，避免自动消失
											  complete: () => { // Toast 显示完成后执行
												  this.getCarInfo()
												},
											})
										}
									}
								})			
							} else if (r.cancel) {
										// 用户点击了取消按钮
										console.log('用户点击取消');
									}
						},
						fail: function (err) {
							// 调用失败的回调函数
							console.error('showModal 调用失败：', err);
						}
					});
					
				},
				selectBrand(e) {
					this.typeName =''
					const list = this.brandList
					this.form.brand = list[e.detail.value].id
					console.log(this.form.brand)
					const that = this
					request({
						url: '/bigbase/type/getInfo?bid='+this.form.brand,
						method: 'GET',
						success: (res) => {
							// console.log(res.data)
							const result=res.data
							if(result.code==200){
								that.tyList = result.rows
								console.log(333,that.tyList)
							}
						}
					})
					for(let i=0; i<list.length; i++){
						if(list[i].id==this.form.brand){
							this.brandName = list[i].name
							// console.log(this.brandList)
							return;
						}
					}
					
				},
				selectType(e){
					const list = this.tyList
					this.form.type = list[e.detail.value].id
					// console.log(this.form.type)
					for(let i=0; i<list.length; i++){
						if(list[i].id==this.form.type){
							this.typeName = list[i].name
							this.typeImg = list[i].img
							return;
						}
					}
				},
				getCarInfo(){
		
					const that = this
					request({
						url: '/bigbase/carInfo/getInfo?uid='+this.form.uid,
						method: 'GET',
						success: (res) => {
							console.log(res.data)
							const result=res.data
							if(result.code==200){
								
								that.infoList = result.rows
								console.log(that.infoList)
							}else{
								uni.showToast({
								  title: '加载失败',
								  icon: 'none',  // 或者 'none'   
								  duration: 2000  // 设置一个较长的时间，避免自动消失
								});
							}
						}
					})
				},
				getBrandAndTypeInfo(){
					const that = this
					request({
						url: '/bigbase/brand/list',
						method: 'GET',
						success: (res) => {
							// console.log(res.data)
							const result=res.data
							if(result.code==200){
								that.brandList = result.rows
								console.log(that.brandList)
							}
						}
					})
					request({
						url: '/bigbase/type/list',
						method: 'GET',
						success: (res) => {
							// console.log(res.data)
							const result=res.data
							if(result.code==200){
								that.typeList = result.rows
								console.log(that.typeList)
							}
						}
					})
				}
		},
		onShow() {
			uni.showToast({
			  title: '加载中...',
			  icon: 'loading',  // 或者 'none'   
			  mask: true,       // 防止用户操作
			  duration: 2000 
			});
			const userInfo = uni.getStorageSync('userInfo')
			this.nickname = userInfo.nickName
			this.form.uid = userInfo.id
			this.getCarInfo()
			this.getBrandAndTypeInfo()
		}
	}
</script>

<style>
.top {
	width: 100%;
	height: 200px;
	background-color: #2979ff;
}

.bottom {
	margin: 0 20px;
}

.bottom-card1 {
	margin-top: -185px;
	background-color: #fff;
	border-radius: 10px;
}
.tianjia{
	width: 80%;
	margin: 10px auto;
}
.car{
	width: 200px;
	height: 300px;
	font-size: 18px;
	padding: 110px 90px;
}
.car>image{
	width: 150px;
	height: 120px;
}
.carImg{
	height: 200px;
	font-size: 18px;
	display: flex; /* 开启 flex 布局 */
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	width: 100%; /* 确保容器占满父元素宽度 */
}
.carImg>image{
	width: 240px;
	height: 120px;
}
.font{
	margin-left: 15px;
}
.tt{width: 100%;
	height: 220px;
	border-radius: 5px;
	border-bottom: solid 10px #F7F7F7;
}
.tou{
	width:60%;
	height: 90px;
	padding-top: 30px;
	margin-left: 20px;
	display: flex;
	justify-content: space-between;
}
.font1{
	font-size: 16px;
	margin-top: 5px;

}
.font2{
	font-size: 16px;
	margin-top: 5px;
}
.shezhi{
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin: 0 10px;
}

.biaodan {
	margin: 10px 20px;
}

.lab {
	width: 100rpx;
	border-radius: 20px;
	background-color: #4FA2FF;
	color: #fff;
	padding: 5px 10px;
	font-size: 10px;
	margin-right: 10px;
	margin-top: 10px;
	display: flex;
	justify-content: center;
}

.inp {
	border-radius: 20px;
	padding: 5px 20px;
	border: solid 2px #E8E8E8;
	margin-top: 10px;
}
.ff{
	display: flex;
	justify-content: space-around;
}
.tupian{
	margin-top: 10px;
}
.inp1{
	border-radius: 20px;
	padding: 5px 20px;
	margin-top: 10px;
}
.sc{
	margin-left: 100px;
	margin-top: -28px;
}

.picker-display {
	width: 360rpx;
}

</style>